<template>

  <div>
    <div  id="echart-line" :style="{float:'left',width: '50%', height: '700px'}"></div>
    <div id="echart-line2" :style="{float:'left',width: '50%', height: '700px'}"></div>

  </div>
</template>

<script>
import * as echarts from "echarts";
export default {
name: "statistics",
  mounted () {
    const {name,xData,yData} = this
    this.initChart(name,xData,yData)
  },
  methods: {

    initChart(name, xData, yData) {

      let getchart = echarts.init(document.getElementById('echart-line'));
      let getchart2 = echarts.init(document.getElementById('echart-line2'));
      var option = {
        title: {
          text: '个人文件存储类型统计'
        },
        legend: {
          top: 'bottom'
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        toolbox: {
          show: true,
          feature: {
            mark: { show: true },
            dataView: { show: true, readOnly: false },
            restore: { show: true },
            saveAsImage: { show: true }
          }
        },
        series: [
          {
            name: '个人文件类型统计',
            type: 'pie',
            radius: [50, 250],
            center: ['50%', '50%'],
            roseType: 'area',
            itemStyle: {
              borderRadius: 8
            },
            data: [
              { value: 41, name: '图片' },
              { value: 18, name: '文档' },
              { value: 2, name: '视频' },
              { value: 6, name: '压缩包' },
              { value: 18, name: '其他' }
            ]
          }
        ]
      };

      var option2 = {
        title: {
          text: '七日内上传文件类型统计'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#6a7985'
            }
          }
        },
        legend: {
          data: ['图片', '视频', '压缩包', '文档', '其他']
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
            data: ['2月27日', '2月28日', '3月1日', '3月2日', '3月3日', '3月4日', '3月5日']
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [
          {
            name: '图片',
            type: 'line',
            stack: 'Total',
            areaStyle: {},
            emphasis: {
              focus: 'series'
            },
            data: [0, 12, 11, 4, 9, 3, 2]
          },
          {
            name: '压缩包',
            type: 'line',
            stack: 'Total',
            areaStyle: {},
            emphasis: {
              focus: 'series'
            },
            data: [15, 22, 1,  30, 10,3, 10]
          },
          {
            name: '文档',
            type: 'line',
            stack: 'Total',
            areaStyle: {},
            emphasis: {
              focus: 'series'
            },
            data: [3, 0,20, 2, 1,  30, 20]
          },
          {
            name: '其他',
            type: 'line',
            stack: 'Total',
            label: {
              show: true,
              position: 'top'
            },
            areaStyle: {},
            emphasis: {
              focus: 'series'
            },
            data: [20, 2,  12, 13, 9, 3,20]
          },
          {
            name: '视频',
            type: 'line',
            stack: 'Total',
            areaStyle: {},
            emphasis: {
              focus: 'series'
            },
            data: [2, 2, 11, 4, 9, 0, 0]
          }
        ]
      };
      getchart.setOption(option);
      getchart2.setOption(option2);
      //随着屏幕大小调节图表
      window.addEventListener("resize", () => {
        getchart.resize();
        getchart2.resize();
      });
    }
  }
}
</script>

<style scoped>

</style>
